<script>
import {ElMessage, ElMessageBox} from 'element-plus'

export default {
  data(){
    return  {
      tableData:[],
      dialogOverflowVisible:false,
      form:{
        order_id :0,
        note1:"",
        note2:[],
        After_service:""
      },
      formLabelWidth: '150 px',
    }
  },



  methods:{
    combinedNote() {
      const note2Str = this.form.note2.join(",");
      return `请求类型：${this.form.note1}  理由：${note2Str}`;
    },
    addService(){
     this.form.After_service=this.combinedNote();
     console.log(this.form.After_service);
      this.$http.get("http://localhost:8080/orderdetail/After_service",{params:{
        After_service: this.form.After_service,
        order_id:this.form.order_id
      }}).then((res) => {
        if (res.data !== 0) {
          ElMessage({
            message: "拒绝发送成功！",
            type: "success",
          })
        } else {
          ElMessage({
            message: "拒绝发送失败！",
            type: "Error"
          })
        }
        this.dialogOverflowVisible = false;
        this.form = {};

      })
          .catch(function (err) {
            console.log(err);
          })
    },
    LoadAllOrdersData(){
      this.$http.get("http://localhost:8080/order/AllOrders").then((res)=>{
        this.tableData = res.data;
        console.log(this.tableData)
      }).catch(function (err) {
        console.log(err);
      })
    },
    OpenAfterServiceDialoge(order_id){
      this.dialogOverflowVisible=true;
      this.form.order_id=order_id;
    }
  },
  mounted() {
    this.LoadAllOrdersData();
  }
}
</script>

<template>
  <el-card style="max-width:100%">
    <template #header>
      <div class="card-header">
        <span>全部订单</span>
      </div>
    </template>
    <el-table :data="tableData" height="550" style="width: 100%">
      <el-table-column prop="goods_image" label="商品图片" width="180">
        <template #default="{ row }">
          <img v-if="row.goods_image"
               :src="`http://localhost:8080/image/upload/${row.goods_image}`"
               alt="goods_image"
               style="width: 100%; height: auto;">
        </template>
      </el-table-column>
      <el-table-column prop="goods_description" label="商品介绍" width="180" />
      <el-table-column prop="count" label="购买数量" width="180" />
      <el-table-column prop="goods_price" label="单价" width="80" />
      <el-table-column prop="subtotal" label="实际支付" width="180" />
      <el-table-column prop="order_state" label="订单状态" width="180" />
      <el-table-column fixed="right" label="操作" width="270">
        <template #default="scope">    <!--自定义内容 在template内加上#default-->
          <el-button  type="success" size="small" @click="OpenAfterServiceDialoge(scope.row.order_id)" >
            售后服务
          </el-button>
     <!-- <el-button  type="danger" size="small" @click="">联系卖家</el-button>-->
          <el-button  type="danger" size="small" @click="">去评价</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>


  <el-dialog
      v-model="dialogOverflowVisible"
      title="售后服务"
      width="800"
      draggable
      overflow
  >
    <div>
      <el-form-item label="选择售后类型" :label-width="formLabelWidth">
        <el-radio-group v-model="form.note1">
          <el-radio value="退货退款">退货退款</el-radio>
          <el-radio value="换货">换货</el-radio>
        </el-radio-group>
      </el-form-item>
    </div>
    <el-card style="width: 480px" shadow="hover">
      <el-form-item label="选择理由" :label-width="formLabelWidth">
        <el-checkbox-group v-model="form.note2">
          <el-checkbox value="发错货了" name="type">
            发错货了
          </el-checkbox>
          <el-checkbox value="不喜欢" name="type">
            不喜欢
          </el-checkbox>
          <el-checkbox value="质量不好" name="type">
            质量不好
          </el-checkbox>
          <el-checkbox value="与描述不符" name="type">
            与描述不符
          </el-checkbox>
          <el-checkbox value="冒牌货" name="type">
            冒牌货
          </el-checkbox>
          <el-checkbox value="存在磕磕碰碰不能接受" name="type">
            存在磕磕碰碰不能接受
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

    </el-card>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogOverflowVisible = false">取消</el-button>
        <el-button type="primary" @click=addService()>
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style>

</style>